<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { register } from "@/api/user.js";
const form = reactive({
  account: "",
  password: "",
  password2: "",
});
const router = useRouter();
const onSubmit = async () => {
  console.log(form, "form");
  let { password, account } = form;
  console.log(password,account);
  let state = await register({
    password,
    username:account,
  });
  if(state&&state.code==="200") {
    router.push("loginType");
  }
  console.log(state,"???")
};
const handleCanel = () => {
  router.replace("/");
};

const handleLogin = (type) => {
  console.log("@@@", type);
  if (type === "gitee") {
    window.location.href = "http://localhost/bl-user/oauth/gitee";
  } else if (type === "qq") {
    // window.location.href="http://localhost/bl-user/oauth/gitee"
  } else if (type === "weibo") {
    window.location.href = "http://localhost/bl-user/oauth/gitee";
  }
};

const handleCheckPassword = (_, value, callback) => {
  if (form.password != value) {
    callback("两次输入不一致！");
  }
};

const rules = {
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  password2: [
    {
      required: true,
      message: "请再次输入密码",
      trigger: "blur",
    },
    {
      validator: handleCheckPassword,
      trigger: "blur",
    },
  ],
};
</script>

<template>
  <el-card class="login-card">
    <i class="icon" @click="handleCanel">
      <el-icon><CloseBold /></el-icon>
    </i>
    <div class="title">账号注册</div>
    <el-form class="demo-form-inline" :rules="rules" :model="form">
      <el-form-item label="账号" prop="account">
        <el-input placeholder="请输入账号" v-model="form.account" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          placeholder="请输入密码"
          v-model="form.password"
          type="password"
        />
      </el-form-item>
      <el-form-item label="再次输入密码" prop="password2">
        <el-input
          placeholder="请再次输入密码"
          v-model="form.password2"
          type="password"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit">注册</el-button>
      </el-form-item>
    </el-form>
    <div class="action">
      <router-link to="loginType">账号登录</router-link>
    </div>
    <!-- 第三方登录 -->
    <div class="third-login">
      <div class="title">社交账号登录</div>
      <div class="third-group">
        <svg-icon
          name="qq"
          width="30"
          height="30"
          @click="handleLogin('qq')"
        ></svg-icon>
        <svg-icon
          name="gitee"
          width="30"
          height="30"
          @click="handleLogin('gitee')"
        ></svg-icon>
        <svg-icon
          name="weibo"
          width="30"
          height="30"
          @click="handleLogin('weibo')"
        ></svg-icon>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.login-card {
  position: relative;
  margin: auto;
  width: 25%;
  margin-top: 15vh;
  border-radius: 10px;
  text-align: center;
  .icon {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
    &:hover {
      svg {
        color: skyblue;
      }
    }
  }
  .title {
    margin-bottom: 20px;
  }
  .el-button {
    margin: 0 auto;
    border-radius: 20px;
    width: 50%;
  }
  .action {
    font-size: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .third-login {
    .title {
      font-size: 12px;
      color: #d8d8d8;
      justify-content: center;
      display: flex;
      align-items: center;
      &::before {
        content: "";
        display: inline-block;
        width: 60px;
        height: 1px;
        background-color: #d8d8d8;
        margin: 0 12px;
        margin-top: 5px;
      }
      &::after {
        content: "";
        display: inline-block;
        width: 60px;
        height: 1px;
        background-color: #d8d8d8;
        margin: 0 12px;
        margin-top: 5px;
      }
    }
    .third-group {
      display: flex;
      justify-content: center;
      :deep svg {
        margin: 0 10px;
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .login-card {
    width: 80%;
  }
}
</style>
